<template>
  <div>
    <div :style="defStyle" :id="echarts" class="echarts" ref="echarts"></div>
    <!--  @click="handleMousedown"-->
  </div>
</template>
<script>
// 引入echarts
import * as echarts from "echarts";
const SERIES_TYPE = [
  "line",
  "bar",
  "pie",
  "scatter",
  "effectScatter",
  "radar",
  "tree",
  "treemap",
  "sunburst",
  "boxplot",
  "candlestick",
  "heatmap",
  "map",
  "parallel",
  "lines",
  "graph",
  "sankey",
  "funnel",
  "gauge",
  "pictirialBar",
  "themeRiver",
  "custom",
];

export default {
  name: "EchartsComponents",
  props: {
    // 接收父组件传递过来的信息
    // chartData: {
    // type: Array,
    // default: ()=>[]
    // },
    defStyle: {
      type: Object,
      default: () => {
        return {
          width: "50%",
          height: "200px",
        };
      },
    },
    legendData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    optionsObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
    funArr: {
      type: Array,
      default: () => [],
    },
    // 可以手动传入 图标类型 默认线性
    eType: {
      validator: function(value) {
        // 这个值必须匹配下列字符串中的一个
        return SERIES_TYPE.includes(value) ? value : "line";
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    drawChart() {
      const vm = this;
      // 基于准备好的dom，初始化echarts实例
      // var myChart = echarts.init(this.$refs.echarts);
      var myChart = echarts.init(document.getElementById(this.echarts));
      // 绘制图表
      // var data = {};

      // var arr = Object.keys(this.optionsObj);
      // if(arr.length == 0){
      //      myChart.setOption(
      //         {
      //         title: {
      //         text: 'ECharts 入门示例'
      //         },
      //         tooltip: {},
      //         xAxis: {
      //         data: this.chartData
      //         },
      //         yAxis: {},
      //         series: [
      //         {
      //             name: '销量',
      //             type: 'bar',
      //             data: [5, 20, 36, 10, 10, 20]
      //         }
      //         ]
      //     }
      //     )
      // }else{
      let options = this.getOptions(this.optionsObj);
      // debugger;
      myChart.setOption(options);
      // }
      //将鼠标点击事件提交父组件
      myChart.on("mousedown", function(params) {
        vm.$emit("cb", params);
      });
    },
    //数据格式验证
    getOptions(optionsObj) {
      let defOptions = {
        title: { text: "ECharts" },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: this.legendData,
        },
        // xAxis:{}, //直角坐标系
        // yAxis:{},
        series: [],
      };
      for (let attr in optionsObj) {
        if (!Array.isArray(optionsObj[attr])) {
          Object.keys(defOptions).includes(attr)
            ? Object.assign(defOptions[attr], optionsObj[attr])
            : (defOptions[attr] = optionsObj[attr]);
        } else {
          defOptions[attr] = optionsObj[attr];
        }
      }
      return defOptions;
    },
  },
  computed: {
    //ID 具有唯一性  使用计算属性 来使 每次实例ID不同 [或者进行父组件传值]
    echarts() {
      return "echarts" + Math.random() * 100000;
    },
  },
  mounted: function() {
    const vm = this;
    vm.$nextTick(() => {
      vm.drawChart();
    });
  },
  created: () => {},
  watch: {
    optionsObj: {
      handler() {
        this.drawChart();
      },
      deep: true,
    },
  },
};
</script>
<style type="text/css">
.echarts {
  float: left;
}
</style>
<style scoped></style>
